<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HBase数据查询</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/global.css" media="all">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/table.css"/>
    <style type="text/css">
        .searcheBottom{margin-bottom: 10px;}
    </style>
</head>
<body>
<div class="admin-main">
    <div style="margin: 15px;">
        <form class="layui-form" id="layui-form" action="">
        <blockquote class="layui-elem-quote">
            <div class="demoTable">
                <div class="layui-inline searcheBottom">
                    列名：
                    <div class="layui-inline">
                        <input id="rowKey" class="layui-input" name="rowKey" autocomplete="off" placeholder="请输入RowKey"/>
                    </div>
                </div>
                <div class="layui-inline searcheBottom">
                    表名：
                    <div class="layui-inline">
                        <select id="tableName" name="tableName" class="layui-input" style="padding: 0px 20px;" lay-filter="tableName">
                            <option value="" label="{}">==请选择表名==</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline searcheBottom">
                    <button class="layui-btn" data-type="reload" id="search" lay-submit lay-filter="save">搜索</button>
                    <a class="layui-btn layui-btn-primary" id="reset">重置</a>
                    <a data-opt="add" href="/manage/data/tablelist" class="layui-btn"><i class="layui-icon">&#xe608;</i>表名列表</a>
                </div>
            </div>
        </blockquote>
            <div class="layui-inline searcheBottom" id="key">
                <span style="font-size: 16px;padding-bottom: 10px;" id="rowKeys"><b>HBase数据查询</b></span>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="/plugins/layui/layui.js"></script>
    <script>
        layui.use(['jquery','table','laydate','layer','form','util'],function(){
            var $=layui.jquery,table=layui.table,laydate = layui.laydate,
                layer = layui.layer,form = layui.form,util=layui.util;

            //下拉框
            loadSelect();
            function loadSelect(){
                $.ajax({
                    url:"/manage/data/getTableNames",
                    type:"post",
                    dataType:"json",
                    success:function(data){
                        var root = document.getElementById("tableName");
                        for(var i=0;i<data.length;i++){
                            var option = document.createElement("option");
                            option.setAttribute("value",data[i]["tableNameEn"]);
                            option.setAttribute("label",data[i]["rowkeyHint"]);
                            option.innerHTML = data[i]["tableNameCn"];
                            root.append(option);
                            form.render("select");
                        }

                    }
                });
            }

            form.on('select(tableName)',function (data) {
                $("#hint").remove();
                var label = data.elem[data.elem.selectedIndex].label;
                if(label == '{}'){
                    $("#rowKeys").append('');
                }else {
                    $("#rowKeys").append(
                        '<span style="font-size: 15px;padding-left: 15px;color: red;" id="hint">rowKey提示：'+data.elem[data.elem.selectedIndex].label+'</span>')
                }
            });

            form.on('submit(save)',function(data){
                    $.ajax({
                        url:"/manage/data/dataList",
                        type:"get",
                        dataType:"json",
                        data:data.field,
                        success:function(res){
                            if(res.code==0){
                                $(".dataitem").remove();
                                showData(res.data);
                            }
                        }
                    })
                return false;
            })

            $(".layui-input").keydown(function (e) {
                if(e.keyCode == 13){
                    $('#search').click();
                }
            });

            $("#reset").on('click',function () {
                $("#rowKey").val('');
                $("#hint").remove();
                $("#tableName option:first").attr("selected",true);
            })

            function showData(map) {
                var div = '';
                if(map){
                    $.each(map,function (key,values) {
                        div += '<div class="layui-form-item dataitem"><div style="width:30%;float: left;margin-bottom: 10px;">'
                        div += '<label class="layui-form-label layui-required-tip">key:</label>' +
                            '<div class="layui-input-block"><textarea class="layui-textarea" readonly="readonly">';
                        div += key;
                        div += '</textarea></div></div><div style="width: 70%;float: right;margin-bottom: 10px;">' +
                            '<label class="layui-form-label layui-required-tip">value:</label>' +
                            '<div class="layui-input-block"><textarea class="layui-textarea" readonly="readonly">';
                        div+=values;
                        div += '</textarea></div></div>';
                    });
                }
                $("#key").after(div);
            }
        });
    </script>
</div>
</body>
</html>